<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>观察者模式</title>
  </head>

  <body></body>
  <script>
    // 首先要有一个主题，也就是被观察者
    // 其次需要一个或者多个观察者
    // 当被观察者发生变化的时候，通知所有的观察者执行方法的调用
    class Subject {
      constructor(value) {
        this.state = value;
        this.subscribers = [];
      }

      // 添加观察者
      add(observer) {
        this.subscribers.push(observer);
      }

      setState(newState) {
        this.state = newState;
        this.notify();
      }

      // 当被观察者发生变化，通知观察者更新自己的状态
      notify() {
        this.subscribers.forEach((observer) => {
          observer.update(this);
        });
      }
    }

    // 观察者
    class Watcher {
      constructor() {}

      // 更新
      update(subject) {
        console.log('subject=', subject);
      }
    }

    const baby = new Subject('小宝宝');
    const father = new Watcher('爸爸');
    const mother = new Watcher('妈妈');
    baby.add(father);
    baby.add(mother);

    baby.setState('宝宝哭了');
    baby.setState('宝宝开心了');
  </script>
</html>
